<template>
	<div class="doc_pc_components_VirtualScrollArea_performance">
		<VirtualScrollArea
			v-for="i in 50"
			:key="i"
			v-slot="{item,index}"
			:data="list"
			visible
			class="doc-VirtualScrollArea"
		>
			<div :key="index">{{item}}--index:{{index}}</div>
		</VirtualScrollArea>
	</div>
</template>

<script setup>
import {onMounted} from 'vue';
import {VirtualScrollArea} from 'powerful-ui/pc-default';

const list=[];
for(let i=0;i<5e5;++i){
	list.push({
		id:i,
	});
}
console.time('耗时');
onMounted(() => {
	console.timeEnd('耗时');
});
</script>

<style lang="scss">
.doc_pc_components_VirtualScrollArea_performance{
	.doc-VirtualScrollArea{
		margin:20px;
		width:250px;
		height:300px;
	}
}
</style>